
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>商城</title>
        <link rel="stylesheet" href="./css/common.css">
        <link rel="stylesheet" href="./css/base2018.css">
        <link rel="stylesheet" href="./css/store.css">
    </head>
    <body>
        <div class="main">
            <div class="adv">
                <img />
            </div>
            <div class="crumbs">
                <a href="javascript:;">首页</a>&gt
                <a href="javascript:;">中药</a>&gt
                <a href="javascript:;">男士用药</a>&gt
                <a href="javascript:;">xxxxx药</a>
            </div>
            <div class="store clearfix">
                <div class="store-l">
                    <div class="store-intro">
                        <div class="big-img" id="bigimg"><img src="" /></div>
                        <div class="img-list" id="imglist">
                            <ul class="clearfix">
                                <li><img class="current" src="img/store1.png" /></li>
                                <li><img src="img/store2.jpg" /></li>
                                <li><img src="img/store3.jpg" /></li>
                                <li><img src="img/store4.jpg" /></li>
                                <li><img src="img/store5.jpg" /></li>
                            </ul>
                        </div>
                        <p><i class="red">温馨提示：</i>图片均为健客对原品的真实拍摄，仅供参考；如遇新包装上市可能存在更新滞后，请以实物为准！</p>
                    </div>
                    <a class="addsc"><em>+</em>加入收藏</a>
                </div>
                <div class="store-r">
                    <div class="title-info">
                        <div class="title">
                            <h1>古汉养生精口服液(古汉)</h1>
                            <span>疗程480元！</span>
                            <a class="iden">认证</a>
                        </div>
                        <p>补气，滋肾，益精，用于气阴亏虚、肾精不定所致的头晕、心悸、目眩、耳鸣、健忘、失眠、疲乏无力；更年期综合症，病后体虚见上述证候者。</p>
                    </div>
                    <div class="goods-info">
                        <div class="else-info">
                            <span class="red">【戳我下载APP 立省380元】</span>
                            <a class="iden">正品保证</a>
                        </div>
                        <div class="goods-intro">
                            <ul>
                                <li>
                                    <span class="intro-title">通用名称：</span>
                                    <div class="default">
                                        <a href="javascript:;">古汉养生精口服液</a>
                                        <i class="explain">OTC</i>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">产品编号：</span>
                                    <div class="default">B12000000489</div>
                                </li>
                                <li>
                                    <span class="intro-title">批准文号：</span>
                                    <div class="default">
                                        <span>国药准字Z43020746</span>
                                        <a class="blue" href="javascript:;">（国家食药总局查询）</a>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">商品评分：</span>
                                    <div class="default">
                                        <div class="level">
                                            <i></i>
                                            <i></i>
                                            <i></i>
                                            <i></i>
                                            <i></i>
                                        </div>
                                        <a class="levela" href="javascript:;">（已有391人评价）</a>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">价格：</span>
                                    <div class="default"><i class="price">¥500.00元</i></div>
                                </li>
                                <li>
                                    <span class="intro-title">促销信息：</span>
                                    <div class="default">
                                        <i class="red">10盒一疗程！5盒以上50元/盒，10盒以上48元/盒！【注意：易碎品，请验货再签收】</i>
                                        <div class="offering">
                                            <i>赠品</i>
                                            <span>买10赠以下商品，送完为止！</span>
                                        </div>
                                        <div class="offering-info">
                                            <ul class="clearfix">
                                                <li>
                                                    <div class="offering-img"><img src="img/store2.jpg" /></div>
                                                    <span class="red">x1</span>
                                                </li>
                                                <li>
                                                    <div class="offering-img"><img src="img/store3.jpg" /></div>
                                                    <span class="red">x1</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">用药须知：</span>
                                    <div class="default">易碎品，请验货再签收</div>
                                </li>
                                <li>
                                    <span class="intro-title">产品规格：</span>
                                    <div class="default" id="speci">
                                        <a class="choose current">10ml*12支（口服液）</a>
                                        <a class="choose">0.41g*10ml*3支*10盒（片剂）</a>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">生产厂家：</span>
                                    <div class="default">
                                        <a href="javascript:;">启迪古汉集团衡阳中药有限公司(原紫光古汉集团衡阳中药有限公司)</a>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">购买数量：</span>
                                    <div class="default sthchange">
                                        <input id="lessen-num" type="button" value="-" onclick="lessenNum()">
                                        <input class="buy-num" id="buyNum" type="text" value="1" />
                                        <input id="add-num" type="button" value="+" onclick="addNum(10)">
                                        <a href="javascript:;" class="blue">运费详情</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="default mt10">
                                        <input class="buy" type="button" value="立即购买" />
                                        <button class="tocar" type="button">加入购物车</button>
                                        <input class="uphone" type="text" />
                                        <a class="tocall" href="javascript:;">免费回拨</a>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">xx承诺：</span>
                                    <div class="default">
                                        <a class="cta">正品保证</a>
                                        <a class="cta">货到付款</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = () => {
                /*滑动切换商品图片*/
                let bigImg = document.getElementById("bigimg").children[0],
                    imgBox = document.getElementById("imglist"),
                    liEle = imgBox.getElementsByTagName("li"),
                    imgEle = imgBox.getElementsByTagName("img"),
                    firstSrc = liEle[0].children[0].getAttribute("src");
                bigImg.setAttribute("src",firstSrc);
                for(let i=0; i<liEle.length; i++){
                    liEle[i].onmouseenter = (e) => {
                        var e = e || window.event;
                        for(let j=0; j<imgEle.length; j++){
                            imgEle[j].className = "";
                        }
                        e.target.children[0].className = "current";
                        let thisSrc = e.target.children[0].getAttribute("src");
                        bigImg.setAttribute("src",thisSrc);
                    }
                }
                /*点击选择规格*/
                let speci = document.getElementById("speci"),
                    speciChoose = speci.getElementsByTagName("a");
                for(let i =0; i<speciChoose.length; i++){
                    speciChoose[i].onclick = (e) => {
                        var e = e || window.event;
                        for(let j=0; j<speciChoose.length; j++){
                            speciChoose[j].className = "choose";
                        }
                        e.target.className = "choose current";
                    }
                }
                /*点击修改数量*/
                let buyNum = '';
                addNum = (maxNum) => { //加--maxNum为最大值
                    let initNum = parseInt(document.getElementById("buyNum").value);
                    document.getElementById("buyNum").value = initNum+1;
                    if(initNum == maxNum){
                        document.getElementById("buyNum").value = maxNum;
                        alert("已经是最大值了！！");
                    }
                }
                lessenNum = () => { //减
                    let initNum = parseInt(document.getElementById("buyNum").value);
                    document.getElementById("buyNum").value = initNum-1;
                    if(initNum == 1){
                        document.getElementById("buyNum").value = 1;
                        alert("至少选择一个噢！！");
                    }
                }
            }
        </script>
    </body>
</html>
